import React from 'react'

import {nanoid} from 'nanoid'

import './index.css'


export default function Header({todoList , setTodoList}) {

  //发布事件函数
  const publishHandle = (e) => {
    // 判断按下的是回车键
    if(e.keyCode !== 13) return

    //判断输入的内容不能为空
    const publishValue = e.target.value.trim()
    if(!publishValue) return alert("输入的内容不能为空")

    //创建新的todo对象
    const newTode = {id: nanoid() , todo:publishValue , done:false}

    //调用父组件传递过来的改变setTodoList的方法 把newTodo添加进入
    setTodoList([...todoList , newTode])

    //清空输入框
    e.target.value = ''

  }

  return (
    <div className="todo-header">
      <input type="text" onKeyUp = {publishHandle} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
